@import "../../variables.scss";

#panel-layers {
  height: 100%;

  .content {
    height: calc(100% - #{$sidebar-toolbar-size});
    max-height: calc(100% - #{$sidebar-toolbar-size});
    overflow: auto;

    .item {
      padding: 3px;
      transition: All 0.2s;

      &:hover {
        background-color: rgba(0,0,0,0.1);
      }

      .directions {
        width: 20px;
        height: 20px;
        cursor: pointer;
        background: url("directions.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
        margin-left: 5px;
      }

      span {
        float: right;
        background-color: $gray;
        border-radius: 8px;
        padding: 0 5px;
        line-height: 22px;
      }
    }
    .active {
      background-color: rgba(0,0,0,0.1);
    }

    .object-snapshot{
      display: none;
      position: absolute;
      width: 90%;
      box-shadow: 0 0 16px rgba(153, 153, 153, 0.6);
      z-index: 1;
      background-color: #ffffff;

      h4{
        margin-left: 5px;
        font-weight: bold;
      }

      ul {
        margin: 0;
        li {
          padding: 5px;
          &:hover {
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    .show{
      display: block;
    }
  }

  .toolbar {
    button {
      float: left;
      opacity: 0.7;
      transition: All 0.3s;
      display: inline-block;
      width: $sidebar-toolbar-size;
      height: $sidebar-toolbar-size;

      &:hover {
        opacity: 1;
      }

      &:active, &:focus {
        outline: none;
      }

      &.combine {
        background: url("combine.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.show-all {
        background: url("../ActiveEntities/show-all.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.add-material {
        background: url("set-material.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.btn-calc {
        background: url("calculator.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.btn-edit {
        background: url("edit.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.btn-ungroup {
        background: url("ungroup.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
      &.btn-addToDB {
        background: url("addElement.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
    }
  }
}